<template>
  <section id="rule" v-if="isShow">
          <h4 v-if="titleShow">{{message}}</h4>
          <!-- <p v-if="isIndex" v-for="(text,index) in introduction" :key="index">{{index+1+': '+text}}</p> -->
          <p v-for="(text,index) in introduction" :key="index">{{text}}</p>
   </section>
</template>
<script>
export default {
  name: "rule",
  data () {
      return {
        
      }
  },
  props: {
     message: {
        type:String,
        default(){
            return '活动说明：'
        }
    },
    titleShow:{
      type:Boolean,
      default(){
        return true
      }
    },
    isIndex:{
      type: Boolean,
      default() {
        return true;
      }
    },
    value: {
        type:String,
        default(){
            return ''
        }
    },
    isShow: {
      type: Boolean,
      default() {
        return true;
      }
    }
  },
  computed:{
    introduction(){
        return this.value.split('\n')
    }

  }
};
</script>
<style lang="scss" scoped>
#rule{
      margin-top: 10px;
      padding: 1rem 2rem 0;
      h4{
        font-size: 14px;
        text-align: left;
        font-weight: normal;
      }
      p{
        padding-top: 10px;
        text-align:left;
      }
    }
</style>

